<template>
    <view
        :class="[
            'goods',
            { 'goods--square': shape === 'square' },
            { 'goods--rectangle': shape === 'rectangle' },
            { invalid: disableMsg }
        ]"
        :style="[containStyle]"
    >
        <!-- 商品图片 -->
        <view class="goods-images" :style="[imageStyle]">
            <u-image width="100%" height="100%" :src="image" mode="scaleToFill" />
            <view class="goods-status" v-if="disableMsg">{{
                // disableMsg == "商品库存不足" ? "库存不足" : "商品下架"
                TipMsg
            }}</view>
        </view>
        <!-- 商品信息 -->
        <view class="goods-content">
            <!-- 名称 -->
            <view class="goods-name line-2">
                <slot name="name">{{ name }}</slot>
            </view>
            <!-- 价格 -->
            <view class="goods-other">
                <slot>
                    <price
                        :content="price"
                        main-size="42rpx"
                        minor-size="36rpx"
                        :color="themeColor"
                    >
                        <view slot="suffix">
                            <price
                                class="muted sm m-l-12"
                                :line-through="true"
                                :content="minPrice"
                                v-show="Number(minPrice)"
                            />
                        </view>
                    </price>
                </slot>
            </view>
        </view>
    </view>
</template>

<script>
/**
 * @description 商品卡片
 * @property {String} shape 形状：square-正方形; rectangle-长方形 (默认: square)
 * @property {String} image 商品图片
 * @property {String} name 商品名称
 * @property {String|Number} price 商品价格
 * @property {String|Number|Boolean} minPrice 商品划线价格 (默认：false)
 * @property {String} imageStyle 图片样式
 * @property {String} containStyle 卡片样式
 * @property {boolean} diable 商品失效
 * @example <goods-card shape="rectangle" name="Muze" price="100" minPrice="120" />
 */

export default {
    name: 'GoodsCard',

    props: {
        // square -正方形 | rectangle -长方形
        shape: {
            type: String,
            default: 'square'
        },
        // 商品图片
        image: {
            type: String,
            default: ''
        },
        // 商品名称
        name: {
            type: String,
            default: ''
        },
        // 价格
        price: {
            type: [String, Number],
            default: 0
        },
        // 划线价
        minPrice: {
            type: [String, Number, Boolean],
            default: false
        },

        // 卡片样式
        containStyle: {
            type: Object,
            default: () => {}
        },

        // 图片样式
        imageStyle: {
            type: Object,
            default: () => {}
        },
        disableMsg: {
            type: String,
            default: ''
        }
    },
    computed: {
        TipMsg() {
            switch (this.disableMsg) {
                case '商品库存不足':
                    return '库存不足'
                case '商品不能购买':
                    return '商品下架'
                case '超过购买限制':
                    return '不可购买'
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.goods {
    display: flex;
    border-radius: 7px;
    background-color: #ffffff;
    overflow: hidden;

    &--square {
        flex-direction: column;
        width: 347rpx;
        height: 510rpx;

        .goods-images {
            width: 345rpx;
            height: 345rpx;
        }

        .goods-content {
            padding: 14rpx;
        }
    }

    &--rectangle {
        flex-direction: row;
        align-items: center;
        height: 250rpx;
        padding: 20rpx;

        .goods-images {
            box-sizing: border-box;
            width: calc(250rpx - 2 * 20rpx);
            height: calc(250rpx - 2 * 20rpx);
            border-radius: 7px;
            overflow: hidden;
            position: relative;
            .goods-status {
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                background-color: rgba(0, 0, 0, 0.5);
                color: white;
                font-size: 24rpx;
                text-align: center;
            }
        }

        .goods-content {
            margin-left: 20rpx;
        }
    }

    &-content {
        box-sizing: border-box;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;

        .goods-other {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
        }
    }
}

.goods-name {
    font-size: $-font-size-nr;
    color: #333333;
    overflow: hidden;
}
.invalid {
    opacity: 0.7;
}
</style>
